<template>
    <div>
        <div class="mask"></div>
        <todoHeader></todoHeader>
        <todo></todo>
        <todoFooter></todoFooter>
    </div>
</template>

<script>
    import todoHeader from './todo/header.vue'
    import todoFooter from './todo/footer.jsx'
    import todo from './todo/todo.vue'
    export default {
        name: "app",
        components: {
            todoHeader,
            todoFooter,
            todo
        }
    }
</script>

<style scoped lang="scss">
    .mask {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(107, 30, 30, 0.3);
        z-index: -1;
    }
</style>